<template>
  <view class="integral-mall">
    <view class="top-bg">
      <!-- 背景图片 -->
      <image class="bg-img" src="/static/img/背景.png" mode="aspectFill"></image>
      
      <!-- 用户信息区 -->
      <view class="user-info">
        <uni-icons type="user" size="60" color="#fff"></uni-icons>
        <text class="points-text">你的可用积分：{{ availablePoints }}</text>
      </view>
    </view>

    <!-- 分类导航栏 -->
    <view class="category-bar">
      <view 
        v-for="(item, index) in categoryList" 
        :key="index" 
        :class="['category-item', { active: currentCategory === index }]"
        @click="switchCategory(index)"
      >
        {{ item }}
      </view>
    </view>

    <!-- 商品列表（两列布局） -->
    <view class="goods-container">
      <view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="goToProductDetail(item)">
        <image :src="item.image" class="goods-img" mode="aspectFill"></image>
        <text class="goods-name">{{ item.name }}</text>
        <view class="price-row">
          <text class="point-price">{{ item.pointPrice }} 积分</text>
          <text class="original-price">¥{{ item.originalPrice }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      availablePoints: 10, // 积分（后续对接接口）
      categoryList: ['全部', '小物件', '数码产品', '积分商品', '电子电器', '花'],
      currentCategory: 0, // 当前分类
      goodsList: [ // TODO: 模拟数据，后续替换为后端接口返回的数据
        {
          id: 1,
          image: '/static/img/a.png', // 分类图标
          name: '商品1',
          pointPrice: 100,
          originalPrice: 50
        },
        {
          id: 2,
          image: '/static/img/a.png', // 首页图标
          name: '商品2',
          pointPrice: 200,
          originalPrice: 80
        },
        {
          id: 3,
          image: '/static/img/a.png', // 分类图标(1)
          name: '商品3',
          pointPrice: 150,
          originalPrice: 60
        },
        {
          id: 4,
          image: '/static/img/a.png', // 首页图标(1)
          name: '商品4',
          pointPrice: 300,
          originalPrice: 120
        }
      ]
    }
  },
  methods: {
    switchCategory(index) {
      this.currentCategory = index;
	  console.log(index)
      // TODO: 后续对接分类筛选接口：this.getGoodsByCategory(index)
    },
    
    // 跳转到商品详情页
    goToProductDetail(item) {
      console.log('点击商品:', item)
      // TODO: 后续可以在这里添加商品点击统计等接口调用
      uni.navigateTo({
        url: `/pages/goumaishangpin/goumaishangpin?id=${item.id}`,
        success: () => {
          console.log('跳转成功到商品详情页，商品ID:', item.id)
        },
        fail: (err) => {
          console.log('跳转失败:', err)
          uni.showToast({
            title: '页面开发中',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
/* 全局容器 */
.integral-mall {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 顶部背景区 */
.top-bg {
  position: relative;
  width: 100%;
  height: 360rpx;
  overflow: hidden;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 用户信息区 */
.user-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.points-text {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 20rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* 分类导航栏 */
.category-bar {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e8e8e8;
  overflow-x: auto;
  white-space: nowrap;
}

.category-item {
  flex-shrink: 0;
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f9fa;
  border-radius: 20rpx;
  transition: all 0.2s ease;
}

.category-item.active {
  background-color: #ff4757;
  color: #fff;
  font-weight: 500;
}

.category-item:active {
  transform: scale(0.95);
}

/* 商品列表 */
.goods-container {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.goods-item {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.goods-item:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.12);
}

.goods-img {
  width: 100%;
  height: 280rpx;
  transition: transform 0.2s ease;
}

.goods-item:active .goods-img {
  transform: scale(1.05);
}

.goods-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  padding: 16rpx 20rpx 12rpx;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx 16rpx;
}

.point-price {
  font-size: 28rpx;
  color: #ff4757;
  font-weight: 600;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .goods-container {
    gap: 15rpx;
  }
  
  .goods-img {
    height: 240rpx;
  }
  
  .goods-name {
    font-size: 26rpx;
    padding: 12rpx 16rpx 8rpx;
  }
  
  .point-price {
    font-size: 26rpx;
  }
  
  .original-price {
    font-size: 22rpx;
  }
}

@media screen and (max-width: 600rpx) {
  .goods-container {
    padding: 15rpx;
    gap: 12rpx;
  }
  
  .goods-img {
    height: 200rpx;
  }
  
  .goods-name {
    font-size: 24rpx;
    padding: 10rpx 12rpx 6rpx;
  }
  
  .point-price {
    font-size: 24rpx;
  }
  
  .original-price {
    font-size: 20rpx;
  }
  
  .category-bar {
    padding: 15rpx 20rpx;
  }
  
  .category-item {
    padding: 10rpx 20rpx;
    font-size: 26rpx;
  }
}
</style>